<template>
  <div class="wrapper">
    <a-descriptions :title="title"></a-descriptions>
    <a-steps progress-dot :current="current">
      <a-step v-for="(item) in nodelist" :key="item.code">
        <template v-slot:title>
          <div class="step-title">{{ item.roleName===$t('all.autotext1538')||item.roleName===$t('all.autotext854')?item.roleName:`${item.roleName} ${$t('all.autotext1299')}` }}</div>
          <!-- <div>{{ item.code }}</div> -->
        </template>
        <template v-slot:description>
          <template v-if="type==='edit'">
            <template v-if="item.type===1">
              <ApproveSelect
                :placeholder="$t('all.autotext1079')"
                :showArrow="false"
                :options="getOptions(item.roleName)"
                mode="multiple"
                @change="change(item.code, $event)"
                :maxTagCount="1"
              />
            </template>
            <template v-else>
              <div class="approve-users" >
                <a-tooltip>
                  <template slot="title">
                    {{ getNames(item.roleName) }}
                  </template>
                  {{ getNames(item.roleName) }}
                </a-tooltip>
              </div>
            </template>
          </template>
          <template v-else>
            <div>
              {{ item.processAccount || '' }}
            </div>
          </template>
        </template>
      </a-step>
    </a-steps>
    <!-- 非系统自动支付提示 -->
    <p style="font-size:18px;font-weight:bold" v-if="offline==2">{{ $t('all.autotext1531') }}</p>
  </div>
</template>

<script>
import ApproveSelect from './approveSelect.vue'
import { i18nRender } from '../../../locales'


export default {
  name: 'ApprovePreview',
  components: {
    ApproveSelect
  },
  props: {
    nodes: {
      type: Array,
      default: () => []
    },
    approveUsers: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'edit'
    },
    title: {
      type: String,
      default: i18nRender('all.autotext1024')
    },
    currentNodeCode: {
      type: String,
      default: ''
    },
    offline: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      nodelist: [],
      approveOptions: {},
      values: {}
    }
  },
  computed: {
    current () {
      if (!this.currentNodeCode) return this.nodelist.length
      if (this.currentNodeCode === 'start') return 0
      if (this.currentNodeCode === 'end') return this.nodelist.length
      return this.nodelist.findIndex(item => item.code === this.currentNodeCode)
    }
  },
  watch: {
    nodes: {
      handler (val) {
        for (const key in this.values) {
          if (!this.nodes.find(item => item.code === key)) {
            delete this.values[key]
          }
        }
        this.$emit('assign', this.values)
        const nodes = val.filter(item => item.nodeType !== 2)
        this.nodelist = [{ roleName: this.$t('all.autotext1538'), code: '1010000' }, ...nodes, { roleName: this.$t('all.autotext854') }]
        if (this.offline === 2) {
          this.nodelist = this.nodelist.filter((item) => {
            return item.roleName !== this.$t('all.autotext448') && item.roleName !== this.$t('all.autotext854')
          })
        }
      },
      deep: true
    },
    approveUsers: {
      handler () {
        const optionMap = {}
        for (const key in this.approveUsers) {
          optionMap[key] = this.approveUsers[key].map(item => ({
            ...item,
            label: `${item.roleName}-${item.account}`,
            value: item.userId
          }))
        }
        this.approveOptions = optionMap
      },
      deep: true
    }
  },
  methods: {
    change (code, value) {
      this.$set(this.values, code, value.join(','))
      this.$emit('assign', this.values)
    },
    getOptions (roleNames) {
      if (!roleNames) return []
      const options = []
      const roles = roleNames.split(',')
      for (const key in this.approveOptions) {
        if (roles.includes(key)) {
          options.push(...this.approveOptions[key])
        }
      }
      return options
    },
    getNames (roleNames) {
      if (!roleNames) return
      if (roleNames === this.$t('all.autotext854') || roleNames === this.$t('all.autotext1538')) return ''
      const names = []
      const roles = roleNames.split(',')
      for (const key in this.approveOptions) {
        if (roles.includes(key)) {
          names.push({
            role: key,
            names: this.approveOptions[key].map(item => item.account).join(',')
          })
        }
      }
      if (names.length === 0) return
      return names.map(item => `${item.role}：${item.names}`).join('、')
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper{
  padding-top: 24px;
  width:100%;
  overflow-x: auto;
  padding-bottom: 10px;
}
.step-title{
  font-weight: 500;
  font-size: 16px;
  color: #031F47;
}

.approve-users{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
// .audit-select{
//   border:1px solid #1890FF;
//   /deep/ .ant-select-selection__placeholder{
//     color: #1890FF;
//   }
// }
</style>
